<template>
<div class="mask airMaskbg">

<!-- 空调的控制组件 -->
  <div class="air-control">
    <img src="@/assets/img/dialog_close.png" class="close" @click="close" />
    <div class="operation-box">
      <div v-if="showForm.setAOn.value===1" class="show-con">
        <img
          v-if="showForm.setAMode.hasOwnProperty('value')"
          :src="patternMap[showForm.setAMode.value].img"
          class="absolute patternimg"
        >
        <!-- <img
          v-if="showForm.setAMode.hasOwnProperty('value')"
          :src="lockImgMap[showForm.setALimit.value].img"
          :class="lockImgMap[showForm.setALimit.value].className"
          class="absolute"
        > -->
        <div class="num absolute">
          {{showForm.setATem.value}}
        </div>
        <div class="unit absolute">
          ℃
        </div>
        <div v-if="showForm.setAQuantity.value > 1" class="level-wrapper absolute">
          <div class="level level1" :class="{'active':showForm.setAQuantity.value<8&&showForm.setAQuantity.value === 2}"></div>
          <div class="level level2" :class="{'active':showForm.setAQuantity.value<8&&showForm.setAQuantity.value === 5}"></div>
          <div class="level level3" :class="{'active':showForm.setAQuantity.value<8&&showForm.setAQuantity.value === 3}"></div>
          <div class="level level4" :class="{'active':showForm.setAQuantity.value<8&&showForm.setAQuantity.value === 6}"></div>
          <div class="level level5" :class="{'active':showForm.setAQuantity.value<8&&showForm.setAQuantity.value === 4}"></div>
        </div>
        <img
          v-if="showForm.setAQuantity.value < 2"
          :src="airfengMap[showForm.setAQuantity.value].img"
          class="absolute airfengImg"
        >
      </div>
      <div v-else class="show-con"></div>
      <div class="control-wrap">
        <div class="left-wrap">
          <div v-for="item in list" :key="item.id" class="control-box">
            <el-popover
              v-if="item.parameters[0].widget==='airSwitch'||showForm.setAOn.value===1"
              v-model="item.visible"
              placement="bottom"
              width="100"
              trigger="click"
              popper-class='airpopover'
            >
              <ul class="select">
                <li v-for="option in item.parameters[0].enums" :key="option.value" @click="control(item,option)" class="opt">{{ option.desc }}</li>
              </ul>
              <div class="switch-btn" slot="reference">
                <img v-if="item.parameters[0].widget==='airSwitch'" src="~assets/img/air_btn.png" class="power-ico">
                <span>{{ item.selectDesc|| item.parameters[0].desc }}</span>
              </div>
            </el-popover>
            <div v-else class="off-box">
              <span>{{ item.parameters[0].desc }}</span>
            </div>
          </div>
        </div>
        <!-- 温度控制键固定 -->
        <div class="right-wrap">
          <div class="right-box" :class="{'off-button':showForm.setAOn.value!==1}" @click="airTemUp">
            <img src="~assets/img/air_up.png" class="air-open-close_icon">
          </div>
          <div class="right-box" :class="{'off-button':showForm.setAOn.value!==1}" @click="airTemDown">
            <img src="~assets/img/air_down.png" class="air-open-close_icon">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import { mapState } from 'vuex'
import * as api from '@/api'
import { project_id } from '@/consts/consts'
import { lockImgMap, patternMap, airfengMap } from '@/consts/codeMaps'
export default {
  data() {
    return {
      list: [],
      lists: [],
      lockImgMap,
      patternMap,
      airfengMap,
      widgetMap: {
        'input': 'inputValue',
        'select': 'selectValue',
        'switch': 'switchValue'
      },
      showForm: {
        setAOn: {},
        setAMode: {},
        setAQuantity: {},
        setALimit: {},
        setATem: { value: 24 }
      }
    }
  },
  computed: {
    ...mapState(['deviceDetail', 'controlVisable']),
  },
  methods: {
    close() {
      this.$store.commit('setState', {
        name: 'controlVisable',
        value: false
      })
    },

    getValue(valueArray, val) {
      const paramMap = {
        true: '开',
        false: '关'
      }
      const res = valueArray.find(d => d.desc === paramMap[val])
      if (!res) {
        this.$message.warning('该设备命令不适合开关切换命令,请重新配置')
      }
      return res.value
    },
    // 调高温度
    airTemUp() {
      if (this.showForm.setAOn.value !== 1) {
        return false
      }
      this.showForm.setATem.value++
      if (this.showForm.setATem.value >= 32) {
        this.showForm.setATem.value = 32
      }
      const setConf = {
        cmdName: 'setATem',
        cmdData: {
          tem: this.showForm.setATem.value
        }
      }
      this.airConditionerSubmit(setConf)
    },
    // 调低温度
    airTemDown() {
      if (this.showForm.setAOn.value !== 1) {
        return false
      }
      this.showForm.setATem.value--
      if (this.showForm.setATem.value <= 16) {
        this.showForm.setATem.value = 16
      }
      const setConf = {
        cmdName: 'setATem',
        cmdData: {
          tem: this.showForm.setATem.value
        }
      }
      this.airConditionerSubmit(setConf)
    },

    control(item, option) {
      console.log('item:', item)
      console.log('option:', option)
      item.visible = false
      item.selectDesc = option.desc
      item.selectValue = option.value
      this.showForm[item.name].value = option.value
      this.showForm[item.name].desc = option.desc
      console.log('this.showForm:', this.showForm)
      const cmdData = {}
      cmdData[item.parameters[0].name] = option.value
      const setConf = {
        cmdName: item.name,
        cmdData: cmdData
      }
      this.airConditionerSubmit(setConf)
    },

    pushMQTT(pushData) {
      this.$notify.closeAll()
      api.push.MQTTPush(pushData)
        .then(res => {
          this.$notify({
            title: '提示',
            message: '发送成功',
            type: 'success'
          })
          if (!this.airConditioner) {
            // this.$emit('handleSuccess')
          }
        })
        .catch(err => {
          this.$notify({
            title: '提示',
            message: `发送失败:${err.message}`,
            type: 'error'
          })
        })
    },

    airConditionerSubmit(setConf) {
      const setConfPushData = {
        event: setConf.cmdName,
        store_id: this.$route.query.branch_number,
        serial: this.deviceDetail.serial,
        data: JSON.stringify(setConf)
      }
      this.pushMQTT(setConfPushData)
    },

    async modelConfigListByDevicetype() {
      const { code, data } = await api.core.modelConfigListByDevicetype(7004)
      if (code === 0) {
        const { commands = [] } = data
        commands.forEach(i => {
          i.parameters.forEach(v => {
            if (v.widget === 'switch') {
              v[this.widgetMap[v.widget]] = this.getValue(v.enums, false)
            }
          })
        })
        this.lists = commands
        this.list = this.lists.filter(v => v.parameters[0].widget !== 'airNumber')
        console.log('空调遥控器控制：',this.list )
      }
    }
  },
  created () {
    this.modelConfigListByDevicetype()
  },
}
</script>

<style lang="stylus">
.airMaskbg {
  background:rgba(0, 0, 0, 0.3);
}
.air-control {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1500;
  width: getPx(410);
  height: getPx(325);
  background: $sec-bg;
  border-radius: $radius-mi;
  box-sizing: border-box;
  padding: getPx(40) getPx(40) 0 getPx(40);
  .close {
    width: getPx(31);
    height: getPx(31);
    cursor: pointer;
    position: absolute;
    right: getPx(7);
    top: getPx(7);
  }
  .operation-box {
    box-sizing: border-box;
    width: getPx(334);
    height: getPx(232);
    border: 1px solid $border-color;
    border-radius: $radius-mi;
    padding: getPx(10);
    img {
      display: block;
      
    }
    .show-con {
      background: #213244;  
      width: getPx(315);
      height: getPx(102);
      border-radius: $radius-mi;
      position: relative;
      .patternimg {
        width: getPx(33);
        height: getPx(37);
        top: getPx(10);
        left: getPx(15);  
      }
      .airfengImg {
        left: getPx(38);
        bottom: getPx(15);
        width: getPx(100);
        height:getPx(20);
      }
      .air-lock {
        width: getPx(19);
        height: getPx(24);
        top: getPx(15);
        left: getPx(140); 
      }
      .air-unlock {
        width: getPx(24);
        height: getPx(24);
        top: getPx(15);
        left: getPx(140); 
      }
      .num {
        font-size: $hg-font-size; 
        top: getPx(5);
        right: getPx(40);
      }
      .unit {
        font-size: $base-font-size; 
        top: getPx(20);
        right: getPx(25);
      }
      
      .level-wrapper {
        left: getPx(20);
        bottom: getPx(20);
        width: getPx(145);
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
        .level {
          flex: 1 getPx(18) 0;
          width: getPx(18);
          height: getPx(4)
          background: $air-btn-bg;
          border-radius: $radius-mi;
          &.active {
            background: #fff;  
          }
        }
        for i in 1 2 3 4 5 {
          .level{i} {
            height: getPx(4*i);
          }
        }
      }
    }

    .control-wrap{
      margin-top: getPx(20);
      display: flex;
      justify-content: space-between;
      user-select: none;
      .left-wrap, .right-wrap {
        & > div{ 
          text-align: center;
          border:1px solid #eee;
          border-radius: $radius-ty;
          height: getPx(35);
          line-height: getPx(35);
          cursor: pointer;
        }
        .control-box {
          width: getPx(110);
          margin-bottom: getPx(10);
          background: #3e4e65;
          font-size: $sm-font-size;
        }
        .left-box {
          width: getPx(100);
          .air-open-close_icon{
            margin-right: getPx(5);
          }
        }
        .middle-box {
          width: getPx(100);
          svg{
            margin-left: getPx(10);
          }
        }
        .right-box {
          width: getPx(60);
        }
        .off-button {
          cursor: not-allowed;
            .svg-icon{
              cursor: not-allowed;
            }
          }
        }
        .off-box{
          cursor: not-allowed;
          .svg-icon{
            cursor: not-allowed;
          }
        }
      }
      .left-wrap{
        // flexMiddle(space-between);
        // flex-wrap: wrap;
        // flex-grow: 1;
        // flex: 3 getPx(200) 0;
        width: getPx(220);
        .switch-btn {
          height:100%;
          display: flex;
          justify-content:center;
          flex-direction:column;
          align-items: center;
          .power-ico {
            width: getPx(17);
            height: getPx(17);
          }
        }
        .control-box:nth-of-type(1) {
          height:getPx(80);
          width:getPx(80);
          float: left;
        }
        .control-box:nth-of-type(2) {
          float: right;
        }
        .control-box:nth-of-type(3) {
          float: right;
        }
      }
      .right-wrap {
        flex: 1 getPx(90) 0;
        width: getPx(90);
        display: flex;
        justify-content: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        .right-box {
          margin-bottom: getPx(10);
          flexMiddle(center);
        }
    }  
  }
}
</style>